Portal.Panel = Ext.extend(Ext.util.Observable, {
	init: function(portal){
		portal.getToolbar().btGroupContent.btPanel.on('render', function(bt){
			var ds = new Ext.dd.DragSource(bt.el, {
				ddGroup: 'column'
				,afterDragDrop: function(target, e, id){
					var panel = target.el.createChild({
						tag: 'div'
						,cls: 'panel'
					});
					
					var title = panel.createChild({
						tag: 'div'
						,cls: 'title'
						,html: 'Panel Title'
					});
					
					panel.title = title;
					
					var body = panel.createChild({
						tag: 'div'
						,cls: 'content'
						,html: 'Panel Content'
					});
					
					var panelHeight = panel.getHeight();
					
					panel.body = body;
					
					var dz = new Ext.dd.DragSource(panel.id, {
						ddGroup: 'column'
						,getRepairXY : function(e, data){ 
							return this.repairXY;
						}
						,b4MouseDown: function(e) {
							var x = e.getPageX();
							var y = e.getPageY();
							this.autoOffset(x, y);
						}
						,autoOffset : function(x, y) {
							x -= this.startPageX;
							y -= this.startPageY;
							this.setDelta(x, y);
						}
						,onStartDrag: function(x, y){
							if(!this.ghost){
								var dom = Ext.DomHelper.createDom({
									cls: 'ux-panel-dd-proxy'
									,id: Ext.id
								});
								this.ghost = new Ext.Element(dom);
								
								this.ghost.setHeight(this.el.getHeight());
							}
							
							this.proxy.el.setWidth(this.el.getWidth());
							this.repairXY = this.el.getXY();
							this.el.setDisplayed(false);
						}
						
						,afterDragEnter: function(target, e, id){
							this.ghost.show();
							target.el.appendChild(this.ghost);
						}
						,afterDragOver: function(target, e, id){
							var items = target.el.select('.panel');
							
							var ghostY = this.ghost.getY();
							items.each(function(el, c, index){
								var y = el.getY();
								var height = el.getHeight();
								
								if(e.xy[1] >= y && e.xy[1] <= y + height){
									(ghostY < y)? this.ghost.insertAfter(el) : this.ghost.insertBefore(el);
									return false;
								}	
							}, this);			
						}
						
						,onDragOut: function(e, id){
							//this.ghost.hide();	
						}
						
						,afterDragDrop: function(target, e, id){
							this.el.insertBefore(this.ghost);
							this.el.setDisplayed(true);
							this.ghost.remove();
							delete this.ghost;
							return true;
						}
						
						,afterInvalidDrop: function(target, e, id){
							this.ghost.remove();
							delete this.ghost;
						}
					});
					
					return true;
				}	
			});
		});	
	}
});